<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                  <span class="container-title-p">
                    财务数据
                    <i class="iconfont icon-jiantou"></i>
                  </span>
                  <span>手续费统计</span>
                  </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class='options'>
            <el-input placeholder="筛选：机器设备标识" v-model='params.btm' size='small' clearable style='width:200px;margin-right: 15px;'></el-input>
            <el-input placeholder="筛选：手机号" v-model='params.phone' size='small' clearable style='width:200px;margin-right: 15px;'></el-input>
            <el-input placeholder="筛选：交易订单号" v-model='params.code' size='small' clearable style='width:200px;margin-right: 15px;'></el-input>

            <br>

            <el-select placeholder="法币种类" size="small" clearable v-model='params.virtualCurrencyId' style='width:200px;margin-right: 15px;'>
                <el-option label='所有币种' value=''></el-option>
                <el-option label='BTC' value="1"></el-option>
                <el-option label='ETH' value="2"></el-option>
                <el-option label='WCG' value="3"></el-option>
            </el-select>
            <el-select placeholder="国家" size="small" clearable v-model="params.country" @focus="getCountry" style='width:200px;margin-right: 15px;'>
                <el-option label='所有国家' value=''></el-option>
                <el-option v-for='(item,index) of country' :key='index'
                :label='item.chineseName'
                :value='item.id'>
                </el-option>
            </el-select>
            <el-date-picker 
                class="handle-date"
                size='small'
                @change='showSelect'
                v-model="select_date"
                type="datetimerange"
                :picker-options="pickerOptions2"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right">
            </el-date-picker>

            <el-button type='success' @click='getList' size="small">搜索</el-button>

            <el-table border style="width: 100%" :data='orderData'>
                <el-table-column prop='code' label="交易号" align="center">
                </el-table-column>
                <el-table-column label="订单类型" align="center">
                    <template slot-scope="scope">
                       {{scope.row.category==0?'购买':scope.row.category==1?'提现':scope.row.category==2?'转入':scope.row.category==3?'转出':'币币交易'}}
                        <br>
                        {{scope.row.detail.toCode}}
                    </template>
                </el-table-column>
                <el-table-column label="BTC" align="center">
                    <template slot-scope="scope">
                        {{scope.row.account.virtualCurrency.code=='BTC'?scope.row.fee:''}}
                    </template>
                </el-table-column>
                <el-table-column label="ETH" align="center">
                    <template slot-scope="scope">
                        {{scope.row.account.virtualCurrency.code=='ETH'?scope.row.fee:''}}
                    </template>
                </el-table-column>
                <el-table-column label="WCG" align="center">
                    <template slot-scope="scope">
                        {{scope.row.account.virtualCurrency.code=='WCG'?scope.row.fee:''}}
                    </template>
                </el-table-column>
                <el-table-column prop="btm.code" label="交易设备名称" align="center">
                </el-table-column>
                <el-table-column prop="account.user.country.chineseName" label="国家" align="center">
                </el-table-column>
                <el-table-column prop='createTime' label="交易时间" align="center">
                </el-table-column>
                <el-table-column prop="account.user.phone" label="手机号" align="center">
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                :page-size="params.size"
                @current-change ="handleCurrentChange"
                layout="prev, pager, next"
                :total="all_page">
                </el-pagination>
            </div>
        </div>
        <loading v-if='loading' :tip='tip'></loading>
    </div>
</template>
<script>
    import { api,apiGet,apiPatch,apiDelete} from '@/api/index';
    import loading from '@/components/common/loading.vue';
    export default {
        data() {
            return {
                loading:false,
                tip:'',
                country:[],
                select_date:[],
                orderData:[],
                pickerOptions2: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                country:[],
                params:{
                    page:0,
                    size:8,
                    // virtualCurrencyId:'',
                    category:'',
                    btm:'',
                    phone:'',
                    code:'',
                    virtualCurrencyId:'',
                    startTime:'',
                    endTime:'',
                    country:'',
                },
                all_page:1,
            }
        },
        components:{
            loading
        },
        methods: {
            handleCurrentChange(val){
                this.params.page=val-1;
                this.getList();
            },
            getCountry(){
                var params={
                    page:0,
                    size:10,
                }
                apiGet.country.getCountry(params).then(res=>{
                    //console.log(res)
                    this.country=res.content;
                    // for(var i=0;i<4;i++){
                    //   this.country.push(res.content)
                    // }
                })
            },
            getList(){
                this.loading=true;
                apiGet.accountTransaction.accountTransaction(this.params).then(res=>{
                    this.loading=false;
                    //console.log(res,'交易日志');
                    this.orderData=res.content;
                    this.all_page=res.totalElements;
                })
            },
            showSelect(){
                // //console.log(this.select_date);
                var pecker=[];
                // //console.log(this.select_date);
                if(this.select_date){
                this.select_date.map(item=>{
                    var date = item; //日期对象
                    var now = "";
                    now = date.getFullYear()+"-"; //读英文就行了
                    now = now + (date.getMonth()+1)+"-";//取月的时候取的是当前月-1如果想取当前月+1就可以了
                    now = now + date.getDate()+" ";
                    now = now + date.getHours()+":";
                    now = now + date.getMinutes()+":";
                    now = now + date.getSeconds()+"";
                    // //console.log(now)
                    pecker.push(now);
                })
                this.params.startTime=pecker[0];
                this.params.endTime=pecker[1];
                }else{
                this.params.startTime='';
                this.params.endTime='';
                }
            },
        },
        mounted () {
            this.getList();
        }
    }
</script>
<style>
.handle-date{
    width:424px;
    height: 30px;   
    display:inline-block;
    /* vertical-align:top; */
    margin:15px 20px 10px 0;
}
</style>
